<script setup>
    import { ref } from 'vue'
    //自我介绍
    const intro=ref('')

    //收集城市
    const city=ref('LZ')

    //收集血型
    const blood=ref('o')

    //是否用户同意
    const isAgree=ref(false)

    //收集爱好
    const hobby=ref(['ZQ','PPQ'])
</script>

<template>
<div>
   <!-- 文本域 -->
    <textarea v-model="intro" cols="30" rows="4" placeholder="请输入自我介绍"></textarea><br><br>
    
    <!-- 下拉菜单 -->
     <select v-model="city">
      <option value="LZ">兰州</option>
      <option value="HZ">杭州</option>
      <option value="SZ">苏州</option>
      <option value="GZ">广州</option>
     </select>
     <br>
     <br>

     <!-- 单选框:多个当中只能选择一个，需要给单选框手动添加value属性 -->
      <input type="radio" value="a" v-model="blood" />A
      <input type="radio" value="b" v-model="blood" />B
      <input type="radio" value="ab" v-model="blood" />AB
      <input type="radio" value="o" v-model="blood" />O
      <br>
      <br>

      <!-- 复选框 -->
       <input type="checkbox" v-model="isAgree"/>是否同意用户协议
       <br>
       <br>

       <input type="checkbox" value="LQ" v-model="hobby" />篮球
       <input type="checkbox" value="ZQ" v-model="hobby" />足球
       <input type="checkbox" value="YMQ" v-model="hobby" />羽毛球
       <input type="checkbox" value="PPQ" v-model="hobby" />乒乓球
       <br>
       <input type="checkbox" value="PB" v-model="hobby" />跑步
       <input type="checkbox" value="YX" v-model="hobby" />游戏
       <input type="checkbox" value="LY" v-model="hobby" />旅游
       <input type="checkbox" value="LDW" v-model="hobby" />拉丁舞
</div>
</template>



<style scoped>

</style>